import request from "@/services/interceptors";
import { ExclamationCircleFilled } from "@ant-design/icons";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { Cascader, message, Modal } from "antd";
import { useRef } from "react";
import AddStudent from "./AddStudent";
import { Link } from "react-router-dom";
import { StudentType } from "@/types";
import MyDrawer from "@/components/MyDrawer";
import TestRecord from "./TestRecord";
import { enumValuesAtom } from "@/store/enum";
import { useAtomValue } from "jotai";
import StudentClass from "@/components/StudentClass";

const StudentList = () => {
  const { gradeList, majorList } = useAtomValue(enumValuesAtom);
  const actionRef = useRef<ActionType>(null);
  const columns: ProColumns<StudentType>[] = [
    {
      title: "学员ID",
      dataIndex: "studentId",
      hideInSearch: true,
    },
    {
      title: "学员编号",
      dataIndex: "studentNo",
    },
    {
      title: "学员姓名",
      dataIndex: "studentName",
    },
    {
      title: "年级",
      dataIndex: "classGrade",
      valueType: "select",
      hideInSearch: true,
    },
    {
      title: "队别",
      dataIndex: "classTeam",
      hideInSearch: true,
    },
    {
      title: "区队号",
      dataIndex: "classUnit",
      hideInSearch: true,
    },
    {
      title: "班级",
      dataIndex: "classValue",
      hideInTable: true,
      renderFormItem: () => {
        return <StudentClass />;
      },
    },
    {
      title: "专业",
      dataIndex: "majorId",
      valueType: "select",
      fieldProps: {
        options: majorList,
      },
      hideInTable: true,
    },
    {
      title: "专业名称",
      dataIndex: "majorName",
      hideInSearch: true,
    },
    {
      title: "操作",
      valueType: "option",
      key: "option",
      render: (text, record, _, action) => [
        <AddStudent
          editData={record}
          trigger={<a>编辑</a>}
          onSuccess={() => action?.reload()}
        />,
        <a
          onClick={() => {
            Modal.confirm({
              title: "提示",
              icon: <ExclamationCircleFilled />,
              content: "确认删除吗？",
              okText: "确认",
              cancelText: "取消",
              onOk: async () => {
                await request.sgks.studentDeleteDelete({
                  studentId: +record.studentId,
                });
                message.success("删除成功");
                action?.reload();
              },
            });
          }}
        >
          删除
        </a>,
        <MyDrawer
          width={"85%"}
          title="考试记录"
          drawerContent={<TestRecord studentId={record?.studentId} />}
        >
          <a>考试记录</a>
        </MyDrawer>,
      ],
    },
  ];
  return (
    <ProTable<StudentType>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params, sort, filter) => {
        console.log(sort, filter);
        const requestParams: any = {
          ...params,
          classGrade: params?.classValue?.[0],
          classTeam: params?.classValue?.[1],
          classUnit: params?.classValue?.[2],
          pageNo: params.current,
          pageSize: params.pageSize,
        };
        delete params.classValue;
        const res = await request.sgks.studentListCreate(requestParams);
        return {
          data: res.data.records,
          total: res.data.totalCount,
        };
      }}
      columnsState={{
        persistenceKey: "StudentList_List",
        persistenceType: "localStorage",
        defaultValue: {
          option: { fixed: "right", disable: true },
        },
      }}
      rowKey="studentId"
      search={{
        labelWidth: "auto",
      }}
      toolBarRender={() => [
        <AddStudent onSuccess={() => actionRef.current?.reload()} />,
      ]}
    />
  );
};

export default StudentList;
